<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#c {
    pointer-events: all;
}
#e {
    visibility: collapse;
}
</style>

<!-- The property is set on this outermost element. -->
<div id="a">
    <!-- Tests that the property is propagated through an element that inherits it -->
    <div id="b">
        <!-- Tests that the property stops propagating through an element that doesn't inherit it -->
        <div id="c">
            <!-- The property is also set on this inner element, which inherited it from its parent, and should now propagate down to #e and #f -->
            <div id="d">
                <!-- The property is also set on this inner element, which inherited it from its parent but now sets it itself, and should now propagate to #f -->
                <div id="e">
                    <!-- Tests that the above properties resolve correctly and this inherits the value from #f -->
                    <div id="f">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
test(function(t)
{
    if (!window.internals)
        assert_unreached('This test requires window.internals.');

    a.offsetTop; // Force recalc.
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 0);

    assert_equals(getComputedStyle(a).pointerEvents, "auto");
    assert_equals(getComputedStyle(b).pointerEvents, "auto");
    assert_equals(getComputedStyle(c).pointerEvents, "all");
    assert_equals(getComputedStyle(d).pointerEvents, "all");
    assert_equals(getComputedStyle(e).pointerEvents, "all");
    assert_equals(getComputedStyle(f).pointerEvents, "all");
    assert_equals(getComputedStyle(a).visibility, "visible");
    assert_equals(getComputedStyle(b).visibility, "visible");
    assert_equals(getComputedStyle(c).visibility, "visible");
    assert_equals(getComputedStyle(d).visibility, "visible");
    assert_equals(getComputedStyle(e).visibility, "collapse");
    assert_equals(getComputedStyle(f).visibility, "collapse");

    a.offsetTop; // Force recalc.
    a.style.pointerEvents = "none";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1);

    a.offsetTop; // Force recalc.
    a.style.visibility = "hidden";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1);

    assert_equals(getComputedStyle(a).pointerEvents, "none");
    assert_equals(getComputedStyle(b).pointerEvents, "none");
    assert_equals(getComputedStyle(c).pointerEvents, "all");
    assert_equals(getComputedStyle(d).pointerEvents, "all");
    assert_equals(getComputedStyle(e).pointerEvents, "all");
    assert_equals(getComputedStyle(f).pointerEvents, "all");
    assert_equals(getComputedStyle(a).visibility, "hidden");
    assert_equals(getComputedStyle(b).visibility, "hidden");
    assert_equals(getComputedStyle(c).visibility, "hidden");
    assert_equals(getComputedStyle(d).visibility, "hidden");
    assert_equals(getComputedStyle(e).visibility, "collapse");
    assert_equals(getComputedStyle(f).visibility, "collapse");

    a.offsetTop; // Force recalc.
    d.style.pointerEvents = "painted";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1);

    a.offsetTop; // Force recalc.
    e.style.visibility = "visible";
    assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1);

    assert_equals(getComputedStyle(a).pointerEvents, "none");
    assert_equals(getComputedStyle(b).pointerEvents, "none");
    assert_equals(getComputedStyle(c).pointerEvents, "all");
    assert_equals(getComputedStyle(d).pointerEvents, "painted");
    assert_equals(getComputedStyle(e).pointerEvents, "painted");
    assert_equals(getComputedStyle(f).pointerEvents, "painted");
    assert_equals(getComputedStyle(a).visibility, "hidden");
    assert_equals(getComputedStyle(b).visibility, "hidden");
    assert_equals(getComputedStyle(c).visibility, "hidden");
    assert_equals(getComputedStyle(d).visibility, "hidden");
    assert_equals(getComputedStyle(e).visibility, "visible");
    assert_equals(getComputedStyle(f).visibility, "visible");
}, "Changing both pointer-events and visibility on an element, both independent inherited properties, doesn't cause a style recalc for its children.");
</script>
